<template>
  <div>
    <div class="swiper"><Swiper></Swiper></div>
    <div class="recommend">
      <div class="recommend_left">
        <!-- 热门推荐 -->
        <div class="hot">
          <div class="top">
            <h3><router-link to="/song">热门推荐</router-link></h3>
          </div>
          <ul class="hot_content">
            <li v-for="(v, i) in hotList" :key="i">
              <div class="hot_content_a">
                <router-link :to="`/songlist/${v.id}`"
                  ><img :src="v.picUrl"
                /></router-link>
              </div>
              <div class="hot_content_b">
                <router-link :to="`/songlist/${v.id}`"
                  ><span>{{ v.name }}</span></router-link
                >
              </div>
            </li>
          </ul>
        </div>
        <!-- 新碟上架 -->
        <div class="newdisc">
          <div class="top">
            <h3><router-link to="/newsong">新碟上架</router-link></h3>
          </div>
          <div class="newdisc_content">
            <ul>
              <li v-for="(v, i) in NewDiscList" :key="i">
                <div class="newdisc_content_a">
                  <router-link :to="`albuminfo/${v.id}`"><img :src="v.blurPicUrl" /></router-link>
                </div>
                <div class="newdisc_content_b">
                  <router-link :to="`albuminfo/${v.id}`"
                    ><span>{{ v.name }}</span></router-link
                  >
                </div>
                <div class="newdisc_content_c">
                  <span
                    ><span v-for="(v, i) in v.artists" :key="i"
                      ><span v-if="i > 0">/</span
                      ><router-link :to="`/SingerInfo/${v.id}`">{{ v.name }}</router-link></span
                    ></span
                  >
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="recommend_right">
        <div class="hotSinger">
          <div class="hotSinger_top">
            <h3><router-link to="#">热门歌手</router-link></h3>
          </div>
          <div class="hotSinger_content">
            <ul>
              <li v-for="(v,i) in hotSingerList" :key="i">
                <div class="hotSinger_a"><router-link :to="`/SingerInfo/${v.id}`"><img :src="v.img1v1Url"></router-link></div>
                <div class="hotSinger_b"><router-link :to="`/SingerInfo/${v.id}`"><span>{{v.name}}</span></router-link></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Swiper from "../components/Swiper.vue";
export default {
  components: { Swiper },
  data() {
    return {
      hotList: {},
      NewDiscList: {},
      hotSingerList:{}
    };
  },
  //
  methods: {
    // 获取热门推荐数据
    getHotData() {
      axios.get(`http://127.0.0.1:3000/personalized?limit=8`).then((res) => {
        this.hotList = res.data.result;
      });
    },
    // 获取新碟上架数据
    getNewDiscData() {
      axios.get(`http://127.0.0.1:3000/album/newest`).then((res) => {
        this.NewDiscList = res.data.albums;
        this.NewDiscList.pop();
        this.NewDiscList.pop();
      });
    },
    // 获取热门歌手数据
    getHotSingerData() {
      axios.get(`http://127.0.0.1:3000/top/artists?limit=10`).then((res) => {
        this.hotSingerList = res.data.artists;
      });
    },
  },
  //
  created() {
    this.getHotData();
    this.getNewDiscData();
    this.getHotSingerData();
  },
};
</script>
<style scoped>
.swiper {
  width: 980px;
  margin: 0 auto;
}
.recommend {
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
.recommend .recommend_left {
  width: 730px;
  padding: 20px;
  border-right: 1px solid #d3d3d3;
}
.top {
  border-bottom: 2px solid #c10d0c;
  padding: 0 10px 10px 34px;
  background: url("../../public/images/index.png") no-repeat;
  background-position: -225px -156px;
}
.top h3 {
  font-size: 20px;
  font-weight: 400;
}

.hot .hot_content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 20px;
}
.hot .hot_content li {
  padding-bottom: 30px;
}
.hot .hot_content .hot_content_a img {
  width: 140px;
  height: 140px;
}
.hot .hot_content .hot_content_b span {
  display: block;
  width: 140px;
  font-size: 14px;
}
.hot .hot_content .hot_content_b span:hover {
  text-decoration: underline;
}
/* 新碟部分 */
.newdisc_content {
  background-color: #f5f5f5;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #d3d3d3;
  margin-bottom: 30px;
}
.newdisc_content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.newdisc_content ul li {
  width: 120px;
  height: 100px;
  background: url("../../public/images/coverall.png") no-repeat;
  background-position: 0 -570px;
  margin-bottom: 50px;
  font-size: 12px;
}
.newdisc_content .newdisc_content_a img {
  width: 100px;
  height: 100px;
}
.newdisc_content .newdisc_content_b {
  overflow: hidden;
}
.newdisc_content .newdisc_content_b a {
  display: block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.newdisc_content .newdisc_content_b a:hover {
  text-decoration: underline;
}
.newdisc_content .newdisc_content_c {
  display: flex;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.newdisc_content .newdisc_content_c a:hover {
  text-decoration: underline;
}
.newdisc_content .newdisc_content_c > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 右边部分 */
.recommend .recommend_right {
  width: 250px;
  padding: 20px;
}
.hotSinger .hotSinger_top {
  border-bottom: 1px solid #cccccc;
}
.hotSinger .hotSinger_top h3 {
  padding-bottom: 5px;
}
.hotSinger .hotSinger_top h3 a {
  font-weight: 400;
  font-size: 12px;
}



.hotSinger_content{
  padding-top: 20px;
}
.hotSinger_content ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.hotSinger_content ul li {
  text-align: center;
  padding-bottom: 10px;
}
.hotSinger_content ul li .hotSinger_a img{
width: 80px;
height: 80px;
}
.hotSinger_content ul li .hotSinger_b span{
  font-size: 12px;
}
.hotSinger_content ul li .hotSinger_b span:hover{
  text-decoration: underline;
}
</style>